<script setup lang="ts">
import { ref } from "vue";

const isShow = ref(false)
const age =  ref(12)
</script>



<template>

<div>
 <button @click="isShow = !isShow">点击显示/隐藏图片</button>

 <!-- v-show 本质 是通过修改样式的方式 (display:none) 控制隐藏显示 元素始终再页面上存在 -->
 <img v-show="isShow" src="https://s1.aigei.com/src/img/gif/3d/3dbb70bf3c81407cb5aaba07c79b317b.gif?imageMogr2/auto-orient/thumbnail/!282x270r/gravity/Center/crop/282x270/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:qYcsGJYVmgA7H9fxnPnzL-r10UE=" alt="">

 <!-- v-if 本质 从页面移除或者添加 dom 元素(比较耗费性能) 频繁切换的元素推荐使用 v-show -->
 <img v-show="isShow" src="https://s1.aigei.com/src/img/gif/3d/3dbb70bf3c81407cb5aaba07c79b317b.gif?imageMogr2/auto-orient/thumbnail/!282x270r/gravity/Center/crop/282x270/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:qYcsGJYVmgA7H9fxnPnzL-r10UE=" alt="">


<button @click="age+=2">增加+2</button>
<h1>{{ age }}</h1>

<h1 v-if="age<=17">未成年</h1>

<!-- v-else-if 及 v-else 不能单独使用 需要结合 v-if使用 -->
<h1 v-else-if="age>=18&&age<=25">上大学</h1>
<h1 v-else>牛马中</h1>

</div>

</template>



<style scoped>
div img{
  width: 200px;
  height: 200px;
}
</style>